<!DOCTYPE html>
<html>
<head>
    <title>ProfessionInfoTable</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/jqgrid/ui.jqgrid-bootstrap.css">
    <link rel="stylesheet" href="../../plugins/ztree/css/metroStyle/metroStyle.css">
    <link rel="stylesheet" href="../../css/main.css">
    <script src="../../libs/jquery.min.js"></script>
    <script src="../../plugins/layer/layer.js"></script>
    <script src="../../libs/bootstrap.min.js"></script>
    <script src="../../libs/vue.min.js"></script>
    <script src="../../libs/validator.min.js"></script>
    <script src="../../plugins/jqgrid/grid.locale-cn.js"></script>
    <script src="../../plugins/jqgrid/jquery.jqGrid.min.js"></script>
    <script src="../../plugins/ztree/jquery.ztree.all.min.js"></script>

    <script src="../../js/common.js"></script>
</head>
<body>
<div id="rrapp" v-cloak>
    <div v-show="showList">
        <div class="grid-btn">
            <div class="form-group col-sm-2 set-paddingLeft">
                <input type="text" class="form-control" v-model="q.key" @keyup.enter="query" placeholder="班级名称/专业/学院/指导员">
            </div>
            <div class="btn-container">
                <a class="normal-btn search-color" @click="query">查询</a>
                <!--<a class="normal-btn normal-color" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>-->
                <!--<a class="normal-btn normal-color" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>-->
                <!--<a class="normal-btn normal-color" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>-->
                <a id="exportExcel" class="normal-btn normal-color"><i class="fa fa-pencil-square-o"></i>&nbsp;导出</a>
            </div>
        </div>
        <table id="jqGrid"></table >
        <div id="jqGridPager"></div>
    </div>

    <div v-show="!showList" class="panel panel-default">
            {{className}}
        <div class="form-group">
            <div class="col-sm-2 control-label"></div>
            <input type="button" class="btn btn-primary" @click="reload" value="确定"/>
            &nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
        </div>
    </div>
    <!-- 选择菜单 -->
    <div id="menuLayer" style="display: none;padding:10px;">
        <ul id="teacherTree" class="ztree"></ul>
    </div>


</div>

<script>
    var setting = {
        data: {
            simpleData: {
                enable: true,
                idKey: "menuId",
                pIdKey: "parentId",
                rootPId: -1
            },
            key: {
                url:"nourl"
            }
        }
    };
    var ztree;

    $(function () {
        vm.getTeacher()
        $("#jqGrid").jqGrid({
            url: baseURL + 'classInfo/Select',
            datatype: "json",
            colModel: [

                { label: '班级名称', name: 'className', width: 50 ,key: true, },
                { label: '所属专业', name: 'professionName', width: 30},
                { label: '所属院系', name: 'collegeName', width: 30},
                { label: '年级', name: 'grade', width: 15 },
                { label: '指导员教师号', name: 'adminId', width: 30},
                { label: '指导员姓名', name: 'adminName', width: 15},

                { label: '操作', width: 100,formatter: function(value, options, row){

                        var r='<a class="table-btn1 detail-btn" onclick="teacherTree(\''+row.className+'\')">&nbsp;设置</a>'

                        return r;
                    } }
            ],
            viewrecords: true,
            height:'100%',
            rowNum: 10,
            rowList : [10,30,50],
            rownumbers: true,
            // rownumWidth: 25,
            autowidth:true,
            multiselect: true,
            pager: "#jqGridPager",
            jsonReader : {
                root: "page.list",
                page: "page.currPage",
                total: "page.totalPage",
                records: "page.totalCount"
            },
            prmNames : {
                page:"page",
                rows:"limit",
                order: "order"
            },
            gridComplete:function(){
                //隐藏grid底部滚动条
                $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
            }
        });
    });
    function showAdmin(className)
    {
        vm.className=className
        vm.showList=false
    }

    function  teacherTree(className){
        vm.className=className
        layer.open({
            type: 1,
            offset: '50px',
            skin: 'layui-layer-molv',
            title: "选择指导员",
            area: ['300px', '450px'],
            shade: 0,
            shadeClose: false,
            content: jQuery("#menuLayer"),
            btn: ['确定', '取消'],
            btn1: function (index) {
                var node = ztree.getSelectedNodes();
                //选择上级菜单
                vm.teacher.id = node[0].menuId;
                vm.teacher.name = node[0].name;
                vm.setAdmin()
                layer.close(index);
            }
        });
    }
    var vm = new Vue({
        el:'#rrapp',
        data:{
            q:{
                key: null
            },
            showList: true,
            title: null,
            parentId:0,
            term: {},
            className:null,
            teacher:{
                id:null,
                name:null
            },
        },
        methods: {
            query: function () {
                vm.reload();
            },
            reload: function () {
                vm.showList = true;
                var page = $("#jqGrid").jqGrid('getGridParam','page');
                $("#jqGrid").jqGrid('setGridParam',{
                    postData:{ 'searching': vm.q.key},
                    page:page
                }).trigger("reloadGrid");
            },
            validator: function () {
                if(isBlank(vm.term.schoolAcademicYear)){
                    alert("学年不能为空");
                    return true;
                }

                if(isBlank(vm.term.schoolAcademicTerm)){
                    alert("学期不能为空");
                    return true;
                }
                if(isBlank(vm.term.startDate)){
                    alert("开始时间不能为空");
                    return true;
                }
                if(isBlank(vm.term.endDate)){
                    alert("结束时间不能为空");
                    return true;
                }
                if(isBlank(vm.term.currentTerm)){
                    alert("当前学期不能为空");
                    return true;
                }
                if(isBlank(vm.term.teachingWeekNum)){
                    alert("教学周长度不能为空");
                    return true;
                }
            },
            setAdmin:function () {
                $.ajax({
                    url: baseURL + "/classInfo/setAdmin",
                    data: {
                        className:vm.className,
                        adminId:vm.teacher.id,
                        adminName:vm.teacher.name
                    },
                    success: function (r) {
                       if(r.code==0)
                       {
                        alert("设置成功")
                       }else{
                           alert("设置失败")
                       }
                        vm.reload()
                    }
                });
            },
            getTeacher: function(){
                //加载菜单树
                $.get(baseURL + "TeacherPortrait/getTeacherTree", function(r){
                    ztree = $.fn.zTree.init($("#teacherTree"), setting, r.list);
                    var node = ztree.getNodeByParam("menuId", vm.menu.parentId);
                    ztree.selectNode(node);
                })
                vm.imgUrl='';
            },

        }
    });
</script>
</body>
</html>